<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<body>
  <div class="frame">
    <div class="column">
      <div class="item">
        <div class="left-line"></div>
        <div class="left-bottom-line"></div>
        <div class="right-line"></div>
        <img class="head-img"
          src="http://thirdwx.qlogo.cn/mmopen/vi_32/0YdGwH6MaqJAEUDlnQ7icCTZSBiaUCW7OOtcAozGRLRGPTSEAaDMCfwtALO5dyZiclGCIRauaYjgawnHzyxhSkuwA/132"
          alt="">
        <div class="cont">
          <div class="level">会员</div>
          <div class="name">姓名姓名姓名姓名</div>
        </div>
        <div class="open">
          <img onclick="del(this)" src="./moreUser.png">
        </div>
      </div>
    </div>

  </div>
</body>
<script type="text/javascript">
  let url = 'http://thirdwx.qlogo.cn/mmopen/vi_32/0YdGwH6MaqJAEUDlnQ7icCTZSBiaUCW7OOtcAozGRLRGPTSEAaDMCfwtALO5dyZiclGCIRauaYjgawnHzyxhSkuwA/132';
  function del(img) {
    $(img).parent().parent().parent().nextAll().remove();
    $(img).parent().parent().siblings().children(".right-line").css('display','none');
    $(img).parent().parent().siblings().children(".open").children('img').css('display','block');
    $(img).css('display', 'none');
    $(img).parent().siblings(".right-line").css('display','block');
    let top = $(img).parent().offset().top - 40;
    let column = "<div class='column' style='padding-top:" + top + "px;'>" +
      "</div>"
    $('.frame').append(column);
    let arr = [{ id: 1, level: '会员', name: '姓名', headImg: url, children: true }, { id: 1, level: '会员', name: '姓名', headImg: url, children: true }, { id: 1, level: '会员', name: '姓名', headImg: url, children: true }, { id: 1, level: '会员', name: '姓名', headImg: url, children: true }, { id: 1, level: '会员', name: '姓名', headImg: url, children: true }];
    for (let i = 0; i < arr.length; i++) {
      let item = "<div class='item'>" +
        "<div class='left-line'></div>" +
        "<div class='left-bottom-line'></div>" +
        "<div class='right-line'></div>" +
        "<img class='head-img' src='" + arr[i].headImg + "'>" +
        "<div class='cont'>" +
        "<div class='level'>" + arr[i].level + "</div>" +
        "<div class='name'>" + arr[i].name + "</div>" +
        "</div>" +
        "<div class='open'>" +
        "<img onclick='del(this)' src='./moreUser.png'>" +
        "</div>"
      $(".frame>.column:last-child").append(item);
    }
  }
</script>
<style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }

  .frame {
    display: flex;
    padding: 40px;
  }

  .frame>.column:first-child>.item>.left-line {
    display: none;
  }

  .frame>.column:first-child>.item>.left-bottom-line {
    display: none;
  }

  .column {
    padding-left: 50px;
    min-width: auto;
    flex-shrink: 0
  }

  .frame>.column:first-child {
    padding-left: 0;
  }

  .frame>.column:last-child{
    padding-right: 60px;
  }

  .column>.item:last-child>.left-bottom-line {
    display: none;
  }

  .item {
    display: flex;
    padding-bottom: 20px;
    position: relative;
  }

  .item>.left-line {
    position: absolute;
    width: 30px;
    height: 2px;
    background: #c9c9c9;
    left: -30px;
    top: 30px;
  }

  .item>.left-bottom-line {
    position: absolute;
    width: 2px;
    height: 80px;
    background: #c9c9c9;
    left: -30px;
    top: 30px;
  }

  .item>.right-line {
    position: absolute;
    width: 50px;
    height: 2px;
    background: #c9c9c9;
    right: -20px;
    top: 30px;
    display: none;
  }

  .item>.head-img {
    width: 60px;
    height: 60px;
  }

  .item>.cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 15px;
    margin: 0 15px;
    flex-shrink: 0;
  }

  .item>.cont>.level {
    color: #999;
  }

  .item>.cont>.name {}

  .item>.open {
    display: flex;
    align-items: center;
    width: 20px;
  }

  .item>.open>img {
    width: 20px;
    height: 20px;
  }
</style>

</html>